<template>
  <div class="logo">
    <nuxt-link to="/">
      <!-- <svg alt="logo" src="~assets/logo.svg" /> -->
      <img alt="logo" :class="['logo-img', small ? 'hide-logo' : '']" src="~assets/school_logo.png" style="width: 100%;height:auto">
      <img alt="logo" :class="['logo-img', small ? '' : 'hide-logo']" src="/favicon.ico" style="width: 100%;height:auto">
      <h1 v-if="showTitle">{{ title }}</h1>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: 'Logo',
  props: {
    title: {
      type: String,
      default: '',
      required: false
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    },
    small: {
      type: Boolean,
      default: false,
      required: false
    }
  }
}
</script>

<style lang="less" scoped>
  .logo-img {
    transition: opacity .6s;
    position: relative;
    z-index: 2;
    opacity: 1;

    &.hide-logo {
      transition: opacity 0s;
      position: absolute;
      top: 0;
      left: 24px;
      z-index: 1;
      opacity: 0;
      width: calc(~"100% - 48px");
    }
  }
</style>
